<!--
 * @Description: 系统日志
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-10 14:30:11
 * @LastEditTime: 2021-09-29 18:09:41
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="page-content">
    <table-bar :showTop="false" :columns="columns" @changeColumn="changeColumn">
      <div slot="top">
        <el-form :model="filterSearch" label-width="60px">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="6">
              <!-- 标题 -->
              <el-form-item :label="$t('systerms.Tilte')">
                <!-- 请输入标题 -->
                <el-input
                  v-model.trim="filterSearch.title"
                  :placeholder="$t('systerms.PlaceholderByTitle')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <!-- 类型 -->
              <el-form-item :label="$t('systerms.Type')">
                <!-- 请选择类型 -->
                <el-select
                  v-model="filterSearch.type"
                  style="width:100%;"
                  :placeholder="$t('systerms.SelectType')"
                  v-adaption
                >
                  <!-- 操作日志 系统日志 安全日志 -->
                  <el-option :label="$t('systerms.OperationLog')" value="OPERATION"></el-option>
                  <el-option :label="$t('systerms.SystemLog')" value="SYSTEM"></el-option>
                  <el-option :label="$t('systerms.SecurityLog')" value="SECURITY"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item :label="$t('systerms.Severity')">
                <!--  等级   请选择等级-->
                <el-select
                  v-model="filterSearch.level"
                  style="width:100%;"
                  :placeholder="$t('systerms.SelectGrade')"
                  v-adaption
                >
                  <!-- 全部  通知 告警 严重-->
                  <el-option :label="$t('systerms.All')" :value="-1"></el-option>
                  <el-option :label="$t('systerms.Notice')" :value="1"></el-option>
                  <el-option :label="$t('systerms.GiveAnAlarm')" :value="2"></el-option>
                  <el-option :label="$t('systerms.Critical')" :value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <!-- 结果  请选择结果-->
              <el-form-item :label="$t('systerms.Result')">
                <el-select
                  v-model="filterSearch.result"
                  style="width:100%;"
                  :placeholder="$t('systerms.SelectResult')"
                  v-adaption
                >
                  <!--全部  未知  成功 失败 部分成功-->
                  <el-option :label="$t('systerms.All')" :value="-1"></el-option>
                  <el-option :label="$t('systerms.NotKnow')" :value="0"></el-option>
                  <el-option :label="$t('systerms.Success')" :value="1"></el-option>
                  <el-option :label="$t('systerms.Fail')" :value="2"></el-option>
                  <el-option :label="$t('systerms.PartialSuccess')" :value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="6">
              <!-- 时间 -->
              <el-form-item :label="$t('systerms.Time')">
                <!-- 至  开始时间 结束时间-->
                <el-date-picker
                  style="width:100%;"
                  v-model="filterSearch.dayTime"
                  type="datetimerange"
                  :range-separator="$t('systerms.To')"
                  :start-placeholder="$t('systerms.StartTime')"
                  :end-placeholder="$t('systerms.EndTime')"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-row :xs="24" :sm="12" :lg="6" style="float: right; margin-right: 10px;">
              <!-- 搜索 重置-->
              <el-button type="primary" @click="search">{{$t('systerms.Search')}}</el-button>
              <el-button @click="reset">{{$t('systerms.Reset')}}</el-button>
            </el-row>
          </el-row>
        </el-form>
      </div>
      <div slot="bottom">
        <!-- 导出 -->
        <el-button size="medium" type="primary" plain @click="download">{{$t('systerms.ExportLog')}}</el-button>
      </div>
    </table-bar>

    <tao-table :data="dataList" :page="page" @changePage="changePage" :showPage="true" ref="table">
      <!-- 详情  详情 -->
      <el-table-column :label="$t('systerms.Details')" align="center" width="80" type="expand">
        <template slot-scope="scope">
          <!-- 无 -->
          <span>{{$t('systerms.Details')}}：{{ scope.row.details === '' || scope.row.details === null ? $t('systerms.None') : scope.row.details }}</span>
        </template>
      </el-table-column>
      <el-table-column label="ID" align="center" width="100" prop="id" v-if="columns[0].show" />
      <!-- 标题 -->
      <el-table-column
        :label="$t('systerms.Tilte')"
        width="274"
        show-overflow-tooltip
        prop="title"
        v-if="columns[1].show"
      />
      <!-- 类型 -->
      <el-table-column
        :label="$t('systerms.Type')"
        align="center"
        width="150"
        sortable
        prop="type"
        v-if="columns[2].show"
      >
        <template slot-scope="scope">
          <!-- 操作日志 系统日志 安全日志-->
          <span v-if="scope.row.type === 'OPERATION'">
            <i class="el-icon-user"></i>
            {{$t('systerms.OperationLog')}}
          </span>
          <span v-if="scope.row.type === 'SYSTEM'">
            <i class="el-icon-monitor"></i>
            {{$t('systerms.SystemLog')}}
          </span>
          <span v-if="scope.row.type === 'SECURITY'">
            <i class="el-icon-lock"></i>
            {{$t('systerms.SecurityLog')}}
          </span>
        </template>
      </el-table-column>
      <!-- 操作目标 -->
      <el-table-column
        :label="$t('systerms.OperationTarget')"
        align="center"
        min-width="200"
        show-overflow-tooltip
        prop="target"
        v-if="columns[3].show"
      >
        <template slot-scope="scope">{{scope.row.target.userlabel}}</template>
      </el-table-column>
      <!-- 等级 -->
      <el-table-column
        :label="$t('systerms.Severity')"
        align="center"
        width="100"
        sortable
        prop="level"
        v-if="columns[4].show"
      >
        <template slot-scope="scope">
          <!-- 通知  告警 严重-->
          <span v-if="scope.row.level === 1">{{$t('systerms.Notice')}}</span>
          <span v-if="scope.row.level === 2">{{$t('systerms.GiveAnAlarm')}}</span>
          <span v-if="scope.row.level === 3">{{$t('systerms.Critical')}}</span>
        </template>
      </el-table-column>
      <!-- 结果 -->
      <el-table-column
        :label="$t('systerms.Result')"
        align="center"
        width="110"
        sortable
        prop="operResult"
        v-if="columns[5].show"
      >
        <template slot-scope="scope">
          <!-- 未知  成功 失败 部分成功-->
          <span v-if="scope.row.operResult === 0">
            <i class="i-dot"></i>
            {{$t('systerms.NotKnow')}}
          </span>
          <span v-if="scope.row.operResult === 1">
            <i class="i-success"></i>
            {{$t('systerms.Success')}}
          </span>
          <span v-if="scope.row.operResult === 2">
            <i class="i-error"></i>
            {{$t('systerms.Fail')}}
          </span>
          <span v-if="scope.row.operResult === 3">
            <i class="i-warning"></i>
            {{$t('systerms.PartialSuccess')}}
          </span>
        </template>
      </el-table-column>
      <!-- 用户 -->
      <el-table-column
        :label="$t('systerms.User')"
        align="center"
        width="150"
        prop="username"
        v-if="columns[6].show"
      />
      <!-- IP地址 -->
      <el-table-column
        :label="$t('systerms.IpAddress')"
        align="center"
        width="150"
        prop="ipAddress"
        v-if="columns[7].show"
      />
      <!-- 开始时间 -->
      <el-table-column
        :label="$t('systerms.StartTime')"
        align="center"
        width="170"
        sortable
        prop="startTime"
        v-if="columns[8].show"
      >
        <template slot-scope="scope">{{ scope.row.startTime | filterTime }}</template>
      </el-table-column>
      <!-- 结束时间 -->
      <el-table-column
        :label="$t('systerms.EndTime')"
        align="center"
        width="170"
        sortable
        prop="endTime"
        v-if="columns[9].show"
      >
        <template slot-scope="scope">{{ scope.row.endTime | filterTime }}</template>
      </el-table-column>
    </tao-table>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import { downloadMater } from '@/utils/download';

export default {
  data () {
    return {
      dataList: [],
      filterSearch: {
        title: null,
        type: null,
        level: -1,
        result: -1,
        dayTime: null
      },
      page: {
        page: 1,
        pageSize: 15,
        total: 0
      },
      columns: [
        { name: 'ID', show: true },
        { name: '标题', show: true },
        { name: '类型', show: true },
        { name: '操作目标', show: true },
        { name: '等级', show: true },
        { name: '结果', show: true },
        { name: '用户', show: true },
        { name: 'IP地址', show: true },
        { name: '开始时间', show: true },
        { name: '结束时间', show: true }
      ]
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.refresh();
    });
  },
  filters: {
    // 过滤时间
    filterTime (val) {
      if (val === undefined || val === null || val === '') {
        val = '';
      } else {
        val = val.substring(0, 19);
      }
      return val;
    },
    // 过滤类型
    filterType (val) {
      switch (val) {
        case 'OPERATION':
          val = '操作日志';
          break;
        case 'SYSTEM':
          val = '系统日志';
          break;
        default:
          val = '安全日志';
      }
      return val;
    },
    // 过滤等级
    filterLevel (val) {
      switch (val) {
        case 1:
          val = '通知';
          break;
        case 2:
          val = '告警';
          break;
        default:
          val = '严重';
      }
      return val;
    },
    // 过滤结果
    filterResult (val) {
      switch (val) {
        case 0:
          val = '未知';
          break;
        case 1:
          val = '成功';
          break;
        case 2:
          val = '失败';
          break;
        default:
          val = '部分成功';
      }
      return val;
    }
  },
  methods: {
    download () {
      let arry = [];
      let params = {
        limit: 0,
        offset: 0
      };
      this.$http.put({
        url: '/api/sys/logs/paged',
        data: params
      }).then(res => {
        res.objs.forEach(ele => {
          arry.push({
            'ID': ele.id,
            [this.$t('systerms.Tilte')]: ele.title,
            [this.$t('systerms.Type')]: this.$options.filters['filterType'](ele.type),
            [this.$t('systerms.OperationTarget')]: ele.target.userlabel,
            [this.$t('systerms.Severity')]: this.$options.filters['filterLevel'](ele.level),
            [this.$t('systerms.Result')]: this.$options.filters['filterResult'](ele.operResult),
            [this.$t('systerms.User')]: ele.username,
            [this.$t('systerms.IpAddress')]: ele.ipAddress,
            [this.$t('systerms.StartTime')]: this.$options.filters['filterTime'](ele.startTime),
            [this.$t('systerms.EndTime')]: this.$options.filters['filterTime'](ele.endTime),
            [this.$t('systerms.Details')]: ele.details
          });
        });
        downloadMater(arry);
      });
    },
    // 搜索
    search () {
      let _this = this;
      _this.page.page = 1;
      _this.refresh();
    },
    // 重置
    reset () {
      let _this = this;
      _this.page.page = 1;
      _this.filterSearch = {
        title: null,
        type: null,
        level: -1,
        result: -1,
        dayTime: null
      };
      _this.refresh();
    },
    // 刷新
    refresh () {
      let _this = this;
      let params = {
        title: _this.filterSearch.title,
        type: _this.filterSearch.type,
        from: _this.filterSearch.dayTime ? dayjs(_this.filterSearch.dayTime[0]).format('YYYY-MM-DD HH:mm:ss') : null,
        to: _this.filterSearch.dayTime ? dayjs(_this.filterSearch.dayTime[1]).format('YYYY-MM-DD HH:mm:ss') : null,
        level: _this.filterSearch.level,
        result: _this.filterSearch.result,
        limit: _this.page.pageSize,
        offset: (_this.page.page - 1) * _this.page.pageSize
      };
      _this.$http.put({
        url: '/api/sys/logs/paged',
        data: params
      }).then(res => {
        let { total, objs } = res;
        _this.page.total = total;
        _this.dataList = objs;
      });
    },
    // 过滤显示字段
    changeColumn (columns) {
      this.columns = columns;
      this.$refs.table.doLayout();
    },
    // 切换页码 & 显示条数
    changePage (page) {
      if (page.page) {
        this.page.page = page.page;
      } else {
        this.page.page = 1;
        this.page.pageSize = page.limit;
      }
      this.refresh();
    },
  }
};
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;

  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}
.i-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #e8eaec;
  position: relative;
  top: 1px;
}
.i-success {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #19be6b;
  position: relative;
  top: 1px;
}
.i-error {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #ed4014;
  position: relative;
  top: 1px;
}
.i-warning {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #f90;
  position: relative;
  top: 1px;
}
</style>